<template>
  <div class="user-music-wrap">
    <div class="top-wrap">
      <div class="top-playlist-avater">
        <el-image :src="currentPlayList.coverImgUrl"></el-image>
      </div>
      <div class="top-playlist-info">
        <!-- {{currentPlayList.coverImgUrl}} -->
        <p>{{currentPlayList.name}}</p>
        <div class="creator-info">
          <el-image :src="currentPlayList.creator.avatarUrl"></el-image>
          <span style="color:red;margin-left:5px;margin-right:5px;">{{currentPlayList.creator.nickname}}</span>
          <span>{{createTime}}</span>
        </div>

        <p>最近更新:{{updateTime}}</p>
        <p>播放量:{{currentPlayList.playCount}}</p>
      </div>
    </div>
    <div class="content-wrap">
      <div class="left-wrap">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <template #header>
            <div class="card-header">
              <span>我的歌单</span>
            </div>
          </template>
          <div class="card-body">
            <el-collapse v-model="activePlayList">
              <el-collapse-item name="myList">
                <template #title>
                  <span class="collapse-title">我的歌单</span>
                </template>
                <user-music-card
                  v-for="item in userPlayList"
                  :key="item.id"
                  :songListInfo="item"
                  :active="currentPlayListId"
                ></user-music-card>
              </el-collapse-item>
              <el-collapse-item name="collectList">
                <template #title>
                  <span class="collapse-title">收藏歌单</span>
                </template>
                <user-music-card
                  v-for="item in collectPlayList"
                  :key="item.id"
                  :songListInfo="item"
                  :active="currentPlayListId"
                ></user-music-card>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>
      <ranking-card :songList="userRecord" :isLoading="isLoading"></ranking-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { HttpManager } from "../api/index";

import { useRoute } from 'vue-router'

import RankingCard from "../components/UserMusic/Ranking-Card.vue";
import UserMusicCard from "../components/UserMusic/User-Music-Card.vue";
import { useStore } from "vuex";
import emitter from "../eventbus/index";
import dayjs from "dayjs";
export default defineComponent({
  name: "userMusic",
  setup() {
    const store = useStore();
    
  const route = useRoute();

    let userRecord = ref([]);
    let allPlayList = ref([]);
    let userPlayList = ref([]);
    let collectPlayList = ref([]);

    const activePlayList = ref("myList");

    const currentPlayList = ref({});
    const currentPlayListId = ref(0);

    let isLoading = ref(false);

    const updateTime = computed(() => {
      //当前歌单更新时间

      return dayjs(currentPlayList.value.updateTime).format("YYYY-MM-DD");
    });

    const createTime = computed(() => {
      //当前歌单创建时间
      return dayjs(currentPlayList.value.createTime).format("YYYY-MM-DD");
    });


    HttpManager.getUserPlayList({
      uid: store.state.userInfo.userPoint.userId,
    }).then((res: any) => {
      allPlayList.value = res.playlist;
      res.playlist.forEach((item: any) => {
        if (item.userId === store.state.userInfo.userPoint.userId) {
          userPlayList.value.push(item);
        } else {
          collectPlayList.value.push(item);
        }
      });

      checkPlayList(Number(route.params.pid || userPlayList.value[0].id) );
    });

    const checkPlayList = (id) => {
      //切换歌单 获取歌单信息
      console.log("切换歌单 ", id);
      isLoading.value = true;

      currentPlayListId.value = id;

      allPlayList.value.forEach((item) => {
        if (item.id === id) {
          
            console.log("找到了歌单对应的id");
            
            currentPlayList.value = item;
        }
      });

      HttpManager.getPlayListSong({
        id,
      }).then((res: any) => {
        userRecord.value = res.songs;
        isLoading.value = false;
      });
    };

    emitter.on("checkPlayList", checkPlayList);

    onBeforeUnmount(()=>{//组件销毁前解除绑定事件
        emitter.off("checkPlayList")
    })

    return {
      userRecord,
      userPlayList,
      allPlayList,
      collectPlayList,
      activePlayList,
      isLoading,
      currentPlayListId,
      currentPlayList,
      updateTime,
      createTime,
      checkPlayList,
    };
  },
  components: { RankingCard, UserMusicCard },
});
</script>
 
<style lang = "scss" scoped>
@import "../assets/css/user-music.scss";
</style>